<% view_full_details_rendered = false %>
<%= turbo_frame_tag "section-#{section.id}" do %>
  <% options_param_name = "featured-product-#{section.id}-options" %>
  <% presenter = Spree::FeaturedProductPresenter.new(section, params: params[options_param_name], currency: current_currency) %>
  <% images = presenter.product.present? ? product_media_gallery_images(presenter.product, selected_variant: presenter.selected_variant, variant_from_options: presenter.variant_from_options, options_param_name: options_param_name) : [] %>
  <% current_variant = presenter.selected_variant || presenter.variant_from_options || presenter.product&.first_or_default_variant(current_currency) %>
  <% @selected_variant = presenter.selected_variant %>
  <% @variant_from_options = presenter.variant_from_options %>
  <div style="<%= section_styles(section) %>">
    <div
      class="page-container py-5"
      data-controller="product-form"
      data-product-form-no-cache-value="true"
      data-product-form-url-value="<%= spree.page_section_url(section.id, host: current_store.url) %>"
      data-product-form-frame-name-value="section-<%= section.id %>"
      data-product-form-options-param-name-value="<%= options_param_name %>"
      data-product-form-required-options-value='<%= presenter.product&.option_type_ids&.map(&:to_s)&.to_json %>'
      data-product-form-variant-from-options-disabled-value='<%= !presenter.variant_from_options&.in_stock? %>'
      >
      <% if presenter.product %>
        <div class="lg:hidden -ml-4 -mr-4">
          <%= render 'spree/products/media_gallery', images: images, product: presenter.product %>
        </div>
      <% end %>
      <div id="product-details-page" class="grid-cols-1 lg:grid-cols-12 gap-x-14 <%= presenter.product ? 'grid' : 'flex justify-center w-full' %>">
        <% if presenter.product  %>
          <div class="lg:col-span-7 relative">
            <!-- media gallery for desktop -->
            <div class="hidden lg:block">
              <%= render 'spree/products/media_gallery', images: images, product: presenter.product, desktop: true %>
            </div>
          </div>
        <% end %>
        <div class="lg:col-span-5 lg:col-start-8">
          <% show_waitlist_modal = spree.respond_to?(:waitlists_path) && current_variant.present? %>
          <div
            <% if show_waitlist_modal %>
              data-controller="modal"
            <% end %>
              data-modal-allow-background-close="true"
              class="h-full w-full waitlist-modal"
              data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
            <%= form_with url: spree.line_items_path, method: :post, data: { controller: 'sticky-button', 'product-form-target': 'form' } do %>
              <% if presenter.product %>
                <div class='pt-[4.25rem] lg:pt-0'></div>
                <% section.blocks.each do |block| %>
                  <div <%= block_attributes(block) %>>
                    <% case block.type %>
                    <% when 'Spree::PageBlocks::Products::Brand' %>
                      <% if presenter.product&.brand&.page_builder_url %>
                        <%= link_to spree_storefront_resource_url(presenter.product&.brand), title: strip_tags(presenter.product&.brand&.name).strip, data: { turbo_frame: '_top' } do %>
                          <h3 class="text-sm uppercase font-semibold">
                            <%= presenter.product&.brand&.name %>
                          </h3>
                        <% end %>
                      <% else %>
                        <h3 class="text-sm uppercase font-semibold">
                          <%= presenter.product&.brand&.name %>
                        </h3>
                      <% end %>
                    <% when 'Spree::PageBlocks::Products::Title' %>
                      <h2 class="tracking-tight <%= block.preferred_size == 'small' ? 'text-base lg:text-xl' : block.preferred_size == 'medium' ? 'text-xl lg:text-2xl' : 'text-2xl lg:text-2xl' %> uppercase font-medium">
                        <%= presenter.product ? presenter.product.name : 'Example product' %>
                      </h2>
                    <% when 'Spree::PageBlocks::Products::Price' %>
                      <%=
                      render 'spree/products/price',
                        product: presenter.product,
                        use_variant: true,
                        selected_variant: presenter.selected_variant,
                        price_class: "lg:text-lg lg:font-medium"
                    %>
                    <% when 'Spree::PageBlocks::Products::QuantitySelector' %>
                      <%= render 'spree/products/quantity_selector', product: presenter.product, selected_variant: presenter.selected_variant  %>
                    <% when 'Spree::PageBlocks::Products::BuyButtons' %>
                      <div class="flex w-full my-5">
                        <%= render 'spree/products/add_to_cart_button', product: presenter.product, selected_variant: presenter.selected_variant, sticky_button_classes: "w-full", without_fixed_button: true, options_param_name: options_param_name %>
                        <%= render 'spree/products/add_to_wishlist', variant: current_variant, css_classes: 'btn-secondary ml-5 h-12 !py-0 !px-3 border-default', icon_size: 24 %>
                      </div>
                    <% when 'Spree::PageBlocks::Products::Share' %>
                      <div class="flex justify-between">
                        <details>
                          <summary class="inline-flex space-x-2 group cursor-pointer">
                            <%= heroicon 'arrow-up-tray'%>
                            <div class="group-hover:underline">
                              <%= block.text %>
                            </div>
                          </summary>
                          <% if presenter.product %>
                            <div class="absolute flex" data-controller="copy-input">
                              <div class="has-float-label flex flex-col max-w-[200px]">
                                <%= text_field_tag "product-#{presenter.product.id}-share-link", spree.product_url(presenter.product, host: current_store.url_or_custom_domain), class: 'text-ellipsis text-input border-r-0 !rounded-r-none !rounded-l-md', readonly: true, type: 'text', onclick: 'this.select()', data: { copy_input_target: 'input' } %>
                                <%= label_tag "product-#{presenter.product.id}-share-link", Spree.t(:link) %>
                              </div>
                              <button
                            class="bg-input-bg block border-t-2 border-r-2 border-b-2 rounded-r-md pr-3"
                            data-copy-input-target="copyButton"
                            type="button">
                                <%= heroicon 'clipboard', variant: :outline %>
                                <span class="sr-only"><%= Spree.t(:copy_link) %></span>
                              </button>
                            </div>
                          <% end %>
                        </details>
                        <% if block == section.blocks.last %>
                          <% view_full_details_rendered = true %>
                          <%= link_to spree_storefront_resource_url(presenter.product) || '#', class: class_names('hover:underline flex space-x-2 group',   {'cursor-not-allowed' => presenter.product.nil?}), data: { turbo: 'false' }, aria: { disabled: presenter.product.nil? } do %>
                            <span>
                              <%= Spree.t(:view_full_details) %>
                            </span>
                            <%= heroicon 'arrow-long-right' %>
                          <% end %>
                        <% end %>
                      </div>
                    <% when 'Spree::PageBlocks::Products::VariantPicker' %>
                      <%= render 'spree/products/variant_picker', product: presenter.product, selected_variant: presenter.selected_variant, options_param_name: options_param_name %>
                    <% end %>
                  </div>
                <% end %>
              <% end %>
              <% unless view_full_details_rendered %>
                <%= link_to spree_storefront_resource_url(presenter.product) || '#', class: class_names('hover:underline flex space-x-2 group',   {'cursor-not-allowed' => presenter.product.nil?}), data: { turbo: 'false' }, aria: { disabled: presenter.product.nil? } do %>
                  <span>
                    <%= Spree.t(:view_full_details) %>
                  </span>
                  <%= heroicon 'arrow-long-right' %>
                <% end %>
              <% end %>
            <% end %>
            <%= render('spree/products/add_to_waitlist', variant: current_variant) if show_waitlist_modal %>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
